<template>
  <div id="app">
	  <div class="scrollContain" ref="scrollContain">
		  <index class="index active"></index>
		  <part num="1" class="part">
		  	<part1 slot="main1"></part1>
		  </part>
		  <part num="2" class="part">
		  	<part2 slot="main2"></part2>
		  </part>
		  <part num="3" class="part">
		  	<part3 slot="main3"></part3>
		  </part>
		  <part num="4" class="part">
		  	<part4 slot="main4"></part4>
		  </part>
	  </div>
  </div>
</template>

<script>
import index from './components/index.vue'
import part from './components/part'
import part1 from './components/part/part1'
import part2 from './components/part/part2'
import part3 from './components/part/part3'
import part4 from './components/part/part4'

export default {
  name: 'App',
  components: {
	  index,
	  part,
	  part1,
	  part2,
	  part3,
	  part4
  },
  data() {
	  return {
		currentPage: 0,
		startPos: 0,
		endPos: 0
	  }
  },
  methods:{
	touchStart(e) {
		this.startPos = Math.floor(e.touches[0].clientY)
	},
	touchMove(e) {
		this.endPos = Math.floor(e.touches[0].clientY)
	},
	touchEnd() {
		const scrollContain = this.$refs.scrollContain	
		const pos = this.startPos - this.endPos
		if (pos > 0) {
			if (this.currentPage < 4) {
				this.currentPage++
				scrollContain.children[this.currentPage-1].classList.remove("active")
				scrollContain.children[this.currentPage].classList.add("active")
			}
		} else {				
			if (this.currentPage > 0) {
				this.currentPage--
				scrollContain.children[this.currentPage+1].classList.remove("active")
				scrollContain.children[this.currentPage].classList.add("active")
			}	
		}
	}
  },
  mounted() {
  	this.$nextTick(()=>{
		this.$refs.scrollContain.addEventListener('touchstart', this.touchStart)
		this.$refs.scrollContain.addEventListener('touchmove', this.touchMove)
		this.$refs.scrollContain.addEventListener('touchend', this.touchEnd)
	})
  }
}
</script>

<style scoped="scoped">
	.scrollContain{
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	.index, .part{
		display: none;
		opacity: 0;
		transition: all 1s;
	}
	.index.active{
		display:block;
		opacity: 1;
		transition: all 1s;
		transition-delay: 0.5s;
	}
	.part.active{
		display:block;
		opacity: 1;
		transition: all 1s;
		transition-delay: 0.5s;
	}
</style>
